<template>
 <div>
   <el-row :gutter="20">
     <el-col :span="4" style="border-right: 2px dashed #8cc5ff">
       <el-row :gutter="20" type="flex" align="middle">
         <el-col :span="4" :offset="1">
           <el-avatar class="avatar">{{ username[0].toUpperCase() }}</el-avatar>
         </el-col>
         <el-col :span="6">
           <span style="color: #666;">{{ username }}</span>
         </el-col>
       </el-row>
     </el-col>
     <el-col :span="6">
       <el-row>
         <el-col :offset="1">
           <el-rate
             disabled
             :value="score" />
         </el-col>
       </el-row>
       <el-row>
         <el-col :offset="1">
           {{ content }}
         </el-col>
       </el-row>
     </el-col>
   </el-row>
 </div>
</template>

<script>
export default {
  name: "CommentItem",
  props: {
    username: String,
    content: String,
    score: Number
  }
}
</script>

<style scoped>
.avatar {
  /*transform: translateY(-2px);*/
}

</style>